<script setup lang="ts">
import * as _ from 'lodash'
import Gallery from '@/pages/example/gallery.vue'
import { ref, defineProps, nextTick, reactive } from 'vue'
import { onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import { getUnionById, switchStatus } from '@/api/example.ts'
import Title from '@/pages/detail/title.vue'
import Info from '@/pages/detail/info.vue'
import Relatives from '@/pages/detail/relatives.vue'
import { TitleType } from '@/pages/detail/type.ts'
import { shareUtils } from '@/utils/share'
import myParse from '@/components/loading-parse'
const markers = ref([])
const item = ref({})
const loading = ref(true)
const loadingContent = ref(true)
const titleType = ref(TitleType.case)
const props = defineProps({
  id: String
})
onLoad(() => {
  getUnionById(props.id)
    .then((r) => {
      item.value = r
      const e = {
        id: 1,
        latitude: r.geo_location.location.lat,
        longitude: r.geo_location.location.lng,
        height: 70,
        width: 70,
        callout: {
          content: `${r.geo_location.title}`,
          color: '#000',
          fontSize: 14,
          borderRadius: 10,
          bgColor: '#fff',
          padding: 10,
          display: 'ALWAYS',
          textAlign: 'center'
        },

        iconPath: 'https://forone-gz-oss.oss-cn-guangzhou.aliyuncs.com/uploadfile/assets/map-marker-512.webp'
      }

      markers.value = [e]


    })
    .finally(() => {
      nextTick(() => {
        loading.value = false
      })
    })
})


const handleReady = () => {
  loadingContent.value = false
}



const page = getCurrentPages().pop()

let path: string = shareUtils.buildPathQuery(`/${page?.route}?id=${props.id}`)
onShareTimeline(() => {
  return {
    title: item.value.title,
    imageUrl: item.image,
    path
  }
})
onShareAppMessage(() => {
  debugger
  return {
    title: item.value.title,
    imageUrl: item.image,
    path
  }
})


</script>



<template>
  <ForOneHeader :enableBack="true" />
  <view class="page-body">
    <view class="page-section page-section-gap">


      <!-- display contact ,address of item-->




      <MidLayout>

        <myParse :content="item.contact" style="width: 100vw;"></myParse>

      </MidLayout>



    </view>
  </view>
</template>

<style lang="scss" scoped>
$little-legnth: 10 rpx;

.detail-container {
  background-color: #f3f4f6;

  .info-layout {
    margin-top: $little-legnth;
  }
}

.pad {
  height: 30rpx;
}
</style>
